<template>
  <div class="lick">
    <h3>猜你喜欢</h3>

    <div class="paixu">
      <span v-for="(item, index) in paixu" :key="index" @click="p(index)" :class="{ active: current == index }">
        {{ item }}
      </span>
    </div>

    <div class="remai">
      <span v-for="(item, index) in remaiqu" :key="index">
        {{ item }}
      </span>
    </div>

    <div class="shopping" v-for="(item, index) in shopping" :key="index">
      <div class="im">
        <img :src="item.picUrl" alt="" />
      </div>
      <div class="right">
        <h3>{{ item.name }}</h3>
        <span style="font-size: 14px; margin-top: 5px">{{ item.monthSalesTip }}</span>
        <div class="wen">
          <span>{{ item.minPriceTip }} </span>
          <span>{{ item.shippingFeeTip }}</span>
          <span>{{ item.deliveryTimeTip }}分钟</span>
          <span>{{ item.distance }}</span>
          <span>{{ item.wmPoiScore }}</span>
        </div>

        <div class="chao">
          <div class="chaofan">{{ item.a }}</div>
          <div class="chaofan">{{ item.b }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {

  name: "MyShopping",
  data() {
    return {
      current: 0,
      paixu: ["综合排序", "距离最近", "销量最高", "筛选"],
      remaiqu: ["年货节热卖", "精铁联盟", "满减优惠", "品质联盟"],
      shopping: [

      ],
    };
  },
  mounted() {
    axios.get('/api/shop/list').then(
      response => {
        this.shopping = response.data.list
      },
      error => {
        console.log(error.message);
      }
    )
  },
  methods: {
    p(index) {
      this.current = index;

      if (index == 1) {
        this.shopping.sort((a, b) => {
          return a.wmPoiScore - b.wmPoiScore;
        });
      }
      if (index == 2) {
        this.shopping.sort((a, b) => {
          return b.wmPoiScore - a.wmPoiScore;
        });
      }
      if (index == 0) {
        this.shopping.sort((a, b) => {
          return b.wmPoiScore - a.wmPoiScore;
        });
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.paixu .active {
  color: #ff6a00;
}
.im img {
  width: 100%;
  height: 130px;
}
.lick {
  margin-right: 10px;
}
.paixu {
  margin-top: 10px;
  width: 100%;
  height: 30px;
  // background-color: aqua;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.paixu span {
  color: rgba(0, 0, 0, 0.859);
}
.remai {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 30px;
  // background-color: aqua;
  text-align: center;
}
.remai span {
  width: 21%;
  height: 30px;
  border-radius: 5px;
  background-color: rgba(128, 128, 128, 0.186);
  line-height: 30px;
  font-size: 15px;
}

.shopping {
  margin: 20px 0;
  widows: 100%;
  height: 130px;
  // background-color: aqua;
  display: flex;
}
.im {
  width: 30%;
  height: 130px;
  // background-color: pink;
  margin-right: 15px;
}
.wen {
  margin-top: 6px;
}
.wen span {
  font-size: 12px;
  padding-right: 5px;
  color: gray;
}
.chaofan {
  border-radius: 5px;
  margin-top: 18px;
  width: 100px;
  height: 20px;
  background-color: #ffead0;
  color: #ff6a00;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin-right: 10px;
}
.chao {
  display: flex;
}
</style>